
#struct{
	position:relative;
	padding-left:10px;
	top:auto;
	left:auto;
   /*border:solid 1px red;*/
	
}

#bookname,.part-title,#booktree{
	position:relative;
	margin:auto;
	padding:auto;
	top:0px;
	left:auto; 
	font-size:100%;
	
	font-family:黑体;
	color:black;
	/*width:900px;*/

	/*border:solid 1px red;*/
	
}

#bookname{
	height:30px;
	text-align:center;
}
#part-title1{
	height:30px;
}

#booktree{
	height:1500px;
}

#book-background{
	position:relative;
	font-size:11px;
	
	font-family:宋体;
	color:black;
	line-height:200%;
	margin-bottom:5px;
	
	
}


#part1,#part2,#part3{
	position:relative;
	margin:auto;
	padding:auto;
	/*width:900px;*/
	
	left:10px;
	height:50px;
	/*border:solid 1px red;*/
}	

#part1{
top:5px;
}
#part2{
	top:-10px;
}	
	
	
.icon1,.para,.problem{
	position:relative;
	margin:auto;
	padding:auto;
	height:40px;
	top:15px;
	left:0px;
	/*border:solid 1px red;*/
	float:left;
}
.icon1{
	width:50px;
}
.para1,.problem{
	width:200px;
}
.problem{
	left:15px;
}

#line1,#line2{
    position:relative;
	top:0px;
    left:17px;
	width:3px;
	height:50px;
    border:solid 1px lightskyblue;	
	background:lightskyblue;
}
#line2{
float:left;
}

.child-line{
	position:relative;
	top:0px;
    left:18px;
	width:3px;
	height:55px;
    border:solid 1px lightskyblue;	
	background:lightskyblue;
	float:left;
}

.part2-para{
     position:relative;
	top:0px;
	left:0px;
	width:500px;
	height:50px;
	/*border:solid 1px red;*/
}


#part2-child{
	position:relative;
	top:0px;
	left:0px;
	/*width:900px;*/
	/*height:1300px;*/
	/*border:solid 1px red;*/
	
	
}

#icon-line2{
	position:relative;
	top:0px;
	left:0px;

	
	float:left;
	
}

#part2-tree{
position:relative;
	top:0px;
	
	
	left:40px;
	/*width:500px;*/
	/*height:500px;*/
	/*border:solid 1px red;*/
	
	display:none;
	
}


.childpara-earea{
	position:relative;
	
	left:0px;
	width:320px;
	height:70px;
	
}

.child-explain{
	position:relative;
	font-size:9px;
	
	font-family:宋体;
	color:black;
	line-height:200%;
	
	padding:0px;
	
	height:70px;
	width:250px;
	left:40px;
	top:-20px;

}





#heart{
	
	top:0px;
	left:0px;
	position: relative;  
    width: 20px;  
    height: 20px;  
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  
    background:coral; 
	
	
}
#heart:before,#heart:after{
	
	position: absolute;  
  
    width: 20px;  
    height: 20px;  
    content: '';  
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;   
    border-radius: 50%;  
    background:coral; 
	
	
}

#heart:before{
	bottom:0px;
	left:-9px;
}
#heart:after{
	bottom:9px;
	left:0px;
}


#cross{
	position:relative;
	top:0px;
	left:0px;
	height:40px;
	width:7px;
	background:dimgrey;
	
	-webkit-transform: rotate(-10deg);  
    -moz-transform: rotate(-10deg);  
    -ms-transform: rotate(-10deg); 
    -o-transform: rotate(-10deg);
	transform:rotate(-10deg);
	
	-webkit-animation:cross-float 0.5s infinite alternate; 
    -moz-animation:cross-float 0.5s infinite alternate;
	animation:cross-float 0.5s infinite alternate;
}

#cross:after{
	position:absolute;
	width:30px;
	height:7px;

    background:dimgrey;
	content: '';  
	top:10px;
	left:-11px;

}

@-webkit-keyframes cross-float{
	0%{
		top:0px;
	}
	100%{
		top:-2px;
	}
}

@-moz-keyframes cross-float{
	0%{
		top:0px;
	}
	100%{
		top:-2px;
	}
}	

@-ms-keyframes cross-float{
	0%{
		top:0px;
	}
	100%{
		top:-2px;
	}
}	
	
@-o-keyframes cross-float{
	0%{
		top:0px;
	}
	100%{
		top:-2px;
	}
}	

@keyframes cross-float{
	0%{
		top:0px;
	}
	100%{
		top:-2px;
	}
}	
	



#person1{
	position:relative;
	width:10px;
	height:10px;
   
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
  
	border-radius:50%;
	background:silver;

}
#person1:after{
	
	position:absolute;
	content:'';
	top:10px;
	left:-5px;
	width:10px;
	height:0px;
	border-bottom:solid 15px silver;
	border-left:solid 5px  transparent;
	border-right:solid 5px transparent;
}
#person1:before{
	position:absolute;
	content:'';
	top:10px;
	left:10px;
	width:8px;
	height:2px;
	background:silver;
	
	-webkit-transform: rotate(-20deg); 
    -moz-transform: rotate(-20deg); 
    -ms-transform: rotate(-20deg);  
    -o-transform: rotate(-20deg);
	transform:rotate(-20deg);
}


#person2{
	position:relative;
	width:10px;
	height:10px;
	left:30px;
	top:-10px;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%; 
	border-radius:50%;
	background:burlywood;
	
}
#person2:after{
	
	position:absolute;
	content:'';
	top:10px;
	left:-5px;
	width:10px;
	height:0px;
	border-bottom:solid 15px burlywood;
	border-left:solid 5px  transparent;
	border-right:solid 5px transparent;
}
#person2:before{
	position:absolute;
	content:'';
	top:12px;
	left:-8px;
	width:10px;
	height:2px;
	background:burlywood;
	
	-webkit-transform: rotate(20deg); 
    -moz-transform: rotate(20deg); 
    -ms-transform: rotate(20deg);  
    -o-transform: rotate(20deg);
	transform:rotate(20deg);
}




#male{
	position:relative;
	top:0px;
	left:-4px;
	height:10px;
	width:10px;
	border:solid 3px maroon;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
	border-radius:50%;
}
#male:before{
	position:absolute;
	content:'';
	top:12px;
	left:4px;
	height:13px;
	width:3px;
	background:maroon;
	
}
#male:after{
	position:absolute;
	content:'';
	top:13px;
	left:0px;
	height:8px;
	width:8px;
	border-left:solid 3px maroon;
	border-bottom:solid 3px maroon;
	
	-webkit-transform: rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

#wrong,#wrong:after{
	position:relative;
	top:-10px;
	left:18px;
	width:3px;
	height:15px;
	background:red;
}
#wrong:after{
	position:absolute;
	content:'';
	top:0px;
	left:0px;
	-webkit-transform: rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
	transform:rotate(90deg);
}
#wrong{
	-webkit-transform: rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg); 
    -o-transform:rotate(45deg);
  transform:rotate(45deg);	
}

#famale{
	position:relative;
	top:-31px;
	left:28px;
	height:10px;
	width:10px;
	border:solid 3px fuchsia;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  

	border-radius:50%;
}

#famale:before,#famale:after{
	position:absolute;
	content:'';
	top:12px;
	left:4px;
	height:13px;
	width:3px;
	background:fuchsia;
	
}
#famale:after{
	top:10px;
	left:4px;

	-webkit-transform: rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
	transform:rotate(90deg);
}

.law{
	position:relative;
	left:15px;
	top:0px;
	width:15px;
	height:20px;
	background:dimgray;
	border-radius:20%;
	
	-webkit-transform: rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.law:before{
	position:absolute;
	content:'';
	top:7px;
	left:-20px;
	width:20px;
	height:5px;
	background:dimgray;
	
	-webkit-border-radius:0% 0% 20% 20%;
	-moz-border-radius:0% 0% 20% 20%;
	border-radius:0% 0% 20% 20%;
}

.law:after{
	position:absolute;
	content:'';
	top:28px;
	left:-10px;
	width:20px;
	height:5px;
	background:dimgray;
	
	-webkit-border-radius:20% 20% 0% 0%;
	-moz-border-radius:20% 20% 0% 0%;
	border-radius:20% 20% 0% 0%;
	
	-webkit-transform: rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg); 
    -o-transform:rotate(45deg);
	transform:rotate(45deg);
}


#christian{
	position:relative;
	top:5px;
	left:15px;
	width:10px;
	height:10px;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%; 
	border-radius:50%;
	background:deepskyblue;

}
#christian:after{
	
	position:absolute;
	content:'';
	top:10px;
	left:-5px;
	width:10px;
	height:0px;
	border-bottom:solid 15px deepskyblue;
	border-left:solid 5px  transparent;
	border-right:solid 5px transparent;
}
#christian:before{
	position:absolute;
	content:'';
	top:8px;
	left:8px;
	width:8px;
	height:2px;
	background:deepskyblue;
	
	-webkit-transform:rotate(-60deg);
    -moz-transform:rotate(-60deg);
    -ms-transform:rotate(-60deg);
    -o-transform:rotate(-60deg);
	transform:rotate(-60deg);
}


#cross1,#cross1:after{
	position:relative;
	width:3px;
	height:15px;
	top:-15px;
	left:28px;
    background:red;
}
#cross1:after{
	content: '';  
	position:absolute;
	top:-2px;
	left:0px;
	
	-webkit-transform:scale(0.7,1) rotate(90deg);
	-moz-transform:scale(0.7,1) rotate(90deg);
	-ms-transform:scale(0.7,1) rotate(90deg);
	-o-transform:scale(0.7,1) rotate(90deg);
	transform:scale(0.7,1) rotate(90deg);
	
}

.marriage,.marriage:after{
	position:relative;
	left:0px;
	top:0px;
	width:15px;
	height:15px;
	border:solid 5px deepskyblue;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
	border-radius:50%;
	
}

.marriage:after{
	position:absolute;
	content:'';
	left:8px;
	top:-5px;
	
}

#lamb-hair,#lamb-hair:before,#lamb-hair:after{
	position:relative;
	top:-3px;
	left:15px;
	width:8px;
	height:8px;
	border:solid 1px deepskyblue;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
	border-radius:50%;
    background:deepskyblue;
}

#lamb-hair:before{
	position:absolute;
	top:1px;
	left:-8px;
	content:'';
	
}

#lamb-hair:after{
	position:absolute;
	top:1px;
	left:6px;
	content:'';
	
}

#lamb-head{
	position:relative;
	top:-1px;
	left:9px;
	width:20px;
	height:15px;
	
	-webkit-border-radius:0% 0% 50% 50%;
	-moz-border-radius:0% 0% 50% 50%;
	border-radius:0% 0% 50% 50%;
	border:solid 1px deepskyblue;
	background:deepskyblue;
	
	-webkit-transform: scale(1,1.6);
    -moz-transform: scale(1,1.6);
    -ms-transform: scale(1,1.6);
    -o-transform:scale(1,1.6);
	transform:scale(1,1.6);
}

#lamb-head:before{
	position:absolute;
	top:0px;
	left:-5px;
	width:5px;
	height:10px;
	content:'';
	
	-webkit-border-radius:0% 0% 70% 30%;
	-moz-border-radius:0% 0% 70% 30%;
	border-radius:0% 0% 70% 30%;
	border:solid 1px deepskyblue;
	background:deepskyblue;
	
	-webkit-transform: scale(1.5,0.7) rotate(40deg);
    -moz-transform: scale(1.5,0.7) rotate(40deg);
    -ms-transform: scale(1.5,0.7) rotate(40deg);
    -o-transform:scale(1.5,0.7) rotate(40deg);
	transform:scale(1.5,0.7) rotate(40deg);
	
}

#lamb-head:after{
	position:absolute;
	top:0px;
	left:20px;
	width:5px;
	height:10px;
	content:'';
	
	-webkit-border-radius:0% 0% 30% 70%;
	-moz-border-radius:0% 0% 30% 70%;
	border-radius:0% 0% 30% 70%;
	border:solid 1px deepskyblue;
	background:deepskyblue;
	
	-webkit-transform: scale(1.5,0.7) rotate(-40deg);
    -moz-transform: scale(1.5,0.7) rotate(-40deg);
    -ms-transform: scale(1.5,0.7) rotate(-40deg);
    -o-transform:scale(1.5,0.7) rotate(-40deg);
	transform:scale(1.5,0.7) rotate(-40deg);
	
}

#apostle{
	position:relative;
	top:0px;
	left:15px;
	width:10px;
	height:10px;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
	border-radius:50%;
	
	background:deepskyblue;

}
#apostle:after{
	
	position:absolute;
	content:'';
	top:10px;
	left:-5px;
	width:10px;
	height:0px;
	border-bottom:solid 15px deepskyblue;
	border-left:solid 5px  transparent;
	border-right:solid 5px transparent;
}
#apostle:before{
	position:absolute;
	content:'';
	top:12px;
	left:8px;
	width:10px;
	height:2px;
	background:deepskyblue;
	
	-webkit-transform: rotate(-5deg);  
    -moz-transform: rotate(-5deg);  
    -ms-transform: rotate(-5deg);  
    -o-transform: rotate(-5deg);  
	transform:rotate(-5deg);
}

#sheephook{
	position:relative;
	top:-6px;
	left:32px;
	width:6px;
	height:20px;
	
	-webkit-border-radius:40% 0% 0% 0%;
	-moz-border-radius:40% 0% 0% 0%;
	border-radius:40% 0% 0% 0%;
	border-left:solid 2px deepskyblue;
	border-top:solid 2px deepskyblue;
	
}

.warnning{
	position:relative;
	top:-5px;
	left:0px;
	width:0px;
	height:0px;
	border-bottom:solid 35px yellow;
	border-left:solid 20px  transparent;
	border-right:solid 20px transparent;
	
}

.warnning:before{
	position:absolute;
	top:9px;
	left:-2px;
	content:'';
	width:2px;
	height:12px;
	
	-webkit-border-radius:30% 30% 50% 50%;
	-moz-border-radius:30% 30% 50% 50%;
	border-radius:30% 30% 50% 50%;
	border:solid 1px red;
	background:red;
	
	
}
.warnning:after{
	position:absolute;
	top:25px;
	left:-2px;
	content:'';
	width:2px;
	height:2px;
	
	-webkit-border-radius: 50%;  
    -moz-border-radius: 50%; 
	border-radius:50%;
	border:solid 1px red;
	background:red;
}



.cup{
	position:relative;
	top:0px;
	left:12px;
	width:15px;
	height:15px;
	border:solid 1px deepskyblue;
	
	-webkit-border-radius:0% 0% 50% 50%;
	-moz-border-radius:0% 0% 50% 50%;
	border-radius:0% 0% 50% 50%;
	background:deepskyblue;
}

.cup:before{
	position:absolute;
	content:'';
	top:15px;
	left:5px;
	width:3px;
	height:10px;
	border:solid 1px deepskyblue;
	background:deepskyblue;
}

.cup:after{
	position:absolute;
	content:'';
	top:23px;
	left:1px;
	width:11px;
	height:2px;
	border:solid 1px deepskyblue;
	background:deepskyblue;
	
	-webkit-border-radius:50% 50% 0% 0%;
	-moz-border-radius:50% 50% 0% 0%;
	border-radius:50% 50% 0% 0%;
}

#box{
	position:relative;
	top:0px;
	left:8px;
	width:20px;
	height:20px;
	border:solid 1px deepskyblue;
	background:deepskyblue;
	
}
#box:before{
	position:absolute;
	content:'';
	top:-2px;
	left:-3px;
	width:24px;
	height:5px;
	border:solid 1px silver;
	background:deepskyblue;
}

#box:after{
	position:absolute;
	content:'';
	top:-2px;
	left:8px;
	width:2px;
	height:22px;
	border:solid 1px red;
	background:red;
}

#tie{
	position:relative;
	top:-27px;
	left:11px;
	width:7px;
	height:2px;
	border:solid 1px red;
	background:red;
	
	-webkit-border-radius:80% 40% 40% 80%;
	-moz-border-radius:80% 40% 40% 80%;
	border-radius:80% 40% 40% 80%;
	
	-webkit-transform: rotate(35deg);
    -moz-transform:rotate(35deg);
    -ms-transform:rotate(35deg); 
    -o-transform:rotate(35deg);
	transform:rotate(35deg);
}

#tie:after{
	position:absolute;
	top:-5px;
	left:6px;
	content:'';
	width:7px;
	height:2px;
	border:solid 1px red;
	background:red;
	
	-webkit-border-radius:40% 80% 80% 40%;
	-moz-border-radius:40% 80% 80% 40%;
	border-radius:40% 80% 80% 40%;
	
	-webkit-transform: rotate(-70deg);
    -moz-transform:rotate(-70deg);
    -ms-transform:rotate(-70deg);
    -o-transform:rotate(-70deg);
	
	transform:rotate(-70deg);
}

.grave{
	position:relative;
	top:0px;
	left:17px;
	width:2px;
	height:20px;
	border:solid 1px deepskyblue;
	background:deepskyblue;
}
.grave:before{
	position:absolute;
	content:'';
	top:7px;
	left:-8px;
	width:16px;
	height:2px;
	border:solid 1px deepskyblue;
	background:deepskyblue
}

.grave:after{
	position:absolute;
	content:'';
	top:20px;
	left:-9px;
	width:20px;
	height:10px;
	border:solid 1px deepskybule;
	background:deepskyblue;
	
	border-radius:50% 50% 0% 0%;
	-webkit-border-radius:50% 50% 0% 0%;
	-moz-border-radius:50% 50% 0% 0%;
}

#notes{
	position:relative;
	width:40px;
	height:40px;
	top:0px;
	left:-7px ;
	text-align:center;
	background:bisque;
	
	-webkit-transform: rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);
	
	transform:rotate(-10deg);
	
}
#notes:before{
	width:5px;
	height:8px;
	content:'';
	position:absolute;
	top:-4px;
	left:15px;
	border-top:solid 2px silver;
	border-right:solid 2px silver;
	border-bottom:solid 2px silver;
	border-radius: 3px 7px 7px 3px;
	
	
}
#notes:after{
	width:2px;
	height:5px;
	content:'';
	position:absolute;
	top:3px;
	left:15px;
	background:silver;
}

#part3{
	position:relative;
	top:50px;
}